<template>
	<view class="user-info" v-if="Object.keys(info) != false">
		<image class="avatar" :src="info.avatar || '/static/images/logo.png'" mode="aspectFill"></image>
		<view class="right">
			<view class="name-wrapper">
				<view class="name">{{ info.name }}</view>
				<text class="status" :class="{'wait-status': !isVerify}">{{ isVerify ? '身份已验证' : '等待验证' }}</text>
			</view>
			<view class="info">
				<view>{{ info?.sex == 0 ? '未知' : ( info?.sex == 1 ? '男' : '女' )}}</view>
				<view class="line"></view>
				<view>{{ info.old }}岁</view>
			</view>
		</view>
		<view class="member-btn" v-if="showCheckBtn" @click="$emit('check', info)">队员信息</view>
	</view>
</template>

<script>
	export default {
		props: {
			showCheckBtn: {
				type: Boolean,
				default: true
			},
			isVerify: {
				type: Boolean,
				default: false
			},
			info: {
				type: Object,
				default() {
					return {}
				}
			},
		},
		emits: ['check'],
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
	.user-info {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1px solid #f0f0f0;
		.avatar {
			width: 88rpx;
			height: 88rpx;
			border-radius: 50%;
			background-color: #eee;
		}
		.right {
			padding-left: 24rpx;
			.name-wrapper {
				display: flex;
				align-items: center;
				font-weight: bold;
				.name {
					max-width: 240rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					text-overflow: ellipsis;
					line-clamp: 1;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
				.status {
					display: inline-block;
					font-size: 22rpx;
					height: 32rpx;
					text-align: center;
					width: 140rpx;
					line-height: 32rpx;
					color: #262626;
					font-weight: normal;
					background-color: #eee;
					border-radius: 8rpx;
					margin-left: 20rpx;
				}
				.wait-status {
					background-color: #EBFFFE;
					border: 1px solid $uni-color-primary;
					color: $uni-color-primary;
				}
			}
			.info {
				display: flex;
				align-items: center;
				color: #999;
				margin-top: 4rpx;
				font-size: 24rpx;
				.line {
					height: 24rpx;
					width: 1px;
					background-color: #999;
					margin: 0 20rpx;
				}
			}
		}
		.member-btn {
			color: $uni-color-primary;
			margin-left: auto;
			font-size: 28rpx;
		}
	}
</style>